﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Calculator</title>
        <link rel="stylesheet" href="CalculatorStyles.css" />
    </head>
    <body>
        <section id="main" class="clearfix">
            <header class="clearfix">
                <div class="left">
                    <span id="calculator-icon">

                    </span>
                    <span>Calculator</span>
                </div>
                <div class="right">
                    <ul class="inline">
                        <li>
                            <span class="icon hide"></span>
                        </li>
                        <li>
                            <span class="icon maximize"></span>

                        </li>
                        <li>
                            <span class="icon remove"></span>

                        </li>
                    </ul>
                </div>
            </header>
            <div id="content">
                <section id="menu">
                    <span>View</span>
                    <span>Edit</span>
                    <span>Help</span>
                </section>
                <section id="field">
                    <div>
                        <form>
                            <input type="text" name="name" value="8854455" />
                        </form>
                    </div>
                    <section class="clearfix" id="numbers">
                        <ul>
                            <li>
                                <span> 0000 </span>
                                <span class="different-color"> 63 </span>
                                <span> 0000 </span>
                                <span class="different-color"> 31 </span>
                            </li>
                            <li class="numberTwo">
                                <span> 0000 </span>
                                <span> 0000 </span>
                            </li>
                            <li class="numberTwo">
                                <span> 0000 </span>
                                <span> 0000 </span>
                            </li>
                            <li class="numberTwo">
                                <span> 0000 </span>
                                <span> 0000 </span>
                            </li>
                            <li>
                                <span> 0000 </span>
                                <span class="different-color"> 47 </span>
                                <span> 0000 </span>
                                <span class="different-color"> 15 </span>
                            </li>
                            <li class="numberTwo">
                                <span> 0000 </span>
                                <span> 0000 </span>
                            </li>
                            <li class="numberTwo">
                                <span> 0000 </span>
                                <span> 0000 </span>
                            </li>
                            <li>
                                <span> 0000 </span>
                                <span id="numbersRight1" class="different-color"> 32 </span>
                                <span> 0000 </span>
                                <span id="numbersRight2" class="different-color"> 0 </span>
                            </li>

                        </ul>
                    </section>

                    <section class="clearfix">
                        <div class="left">
                            <div class="system">
                                <ul>
                                    <li>
                                        <input type="radio" name="system" value=" " />
                                        <label>Hex</label>
                                    </li>
                                    <li>
                                        <input type="radio" name="system" value=" " checked="checked" />
                                        <label>Dex</label>
                                    </li>
                                    <li>
                                        <input type="radio" name="system" value=" " />
                                        <label>Oct</label>
                                    </li>
                                    <li>
                                        <input type="radio" name="system" value=" " />
                                        <label>Bin</label>
                                    </li>
                                </ul>
                            </div>
                            <div class="system">
                                <ul>
                                    <li>
                                        <input type="radio" name="name" value=" " checked="checked" />
                                        <label>QWord</label>
                                    </li>
                                    <li>
                                        <input type="radio" name="name" value=" " />
                                        <label>Dword</label>
                                    </li>
                                    <li>
                                        <input type="radio" name="name" value=" " />
                                        <label>Byte</label>
                                    </li>
                                    <li>
                                        <input type="radio" name="name" value=" " />
                                        <label>Hex</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="right buttons">
                            <button value="A" class="disabled"></button>
                            <button value="A" class="command">Mod</button>
                            <button value="A" class="disabled">A</button>
                            <button value="A" class="special-command">MC</button>
                            <button value="A" class="special-command">MR</button>
                            <button value="A" class="special-command">MS</button>
                            <button value="A" class="special-command">M+</button>
                            <button value="A" class="special-command">M-</button>
                            <button value="A" class="command">(</button>
                            <button value="A" class="command">)</button>
                            <button value="A" class="disabled">B</button>
                            <button value="A" id="arrow" class="command">←</button>
                            <button value="A" class="command">CE</button>
                            <button value="A" class="command">C</button>
                            <button value="A" class="command">
                                ±
                            </button>
                            <button value="A" class="disabled">
                                √
                            </button>
                            <button value="A" class="command">RoL</button>
                            <button value="A" class="command">RoR</button>
                            <button value="A" class="disabled">C</button>
                            <button value="A" class="digit">7</button>
                            <button value="A" class="digit">8</button>
                            <button value="A" class="digit">9</button>
                            <button value="A" class="command">/</button>
                            <button value="A" class="disabled">%</button>
                            <button value="A" class="command">Or</button>
                            <button value="A" class="command">Xor</button>
                            <button value="A" class="disabled">D</button>
                            <button value="A" class="digit">4</button>
                            <button value="A" class="digit">5</button>
                            <button value="A" class="digit">6</button>
                            <button value="A" class="command">*</button>
                            <button value="A" class="disabled">1/x</button>
                            <button value="A" class="command">Lsh</button>
                            <button value="A" class="command">Rsh</button>
                            <button value="A" class="disabled">E</button>
                            <button value="A" class="digit">1</button>
                            <button value="A" class="digit">2</button>
                            <button value="A" class="digit">3</button>
                            <button value="-" class="command">-</button>
                            <button value="-" id="tall" class="command">=</button>
                            <button value="-" class="command">Not</button>
                            <button value="-" class="command">And</button>
                            <button value="-" class="disabled">F</button>
                            <button value="-" id="fat" class="digit">0</button>
                            <button value="-" class="disabled">,</button>
                            <button value="a" class="command">+</button>
                        </div>
                    </section>
                </section>
            </div>
        </section>
		<div id="test" style="width:100px;height:100px;background-color:red;">kjdsaflkdslfkasjd;f</div>
		<script >
			var el= document.getElementById("test");
			el.addEventListener("click",function(){
				el.style.color = "orange";
			},false)
		</script>
    </body>
</html>
